<template>
    <div class="Gongge">
        <div class="Gongge-con">
            <Grid :column_num="4" class="Gongge-mix">
                <template v-slot:='props'>
                    <GridItem :columnNumber='props.columnNumber' v-for="(item,index) in gongge" :key="index"  :gongge='item'/>
                </template>
            </Grid>
        </div>
    </div>
</template>

<script>
    import Grid from './gongge/Gongge-grid'
    import GridItem from './gongge/GridItem'
    export default {
        data() {
            return {
                gongge: [{
                    title: '签到',
                    icon: 'icon-aixin'
                }, {
                    title: '礼券',
                    icon: 'icon-Dxiangbao-shoutibao'
                }, {
                    title: '砍价',
                    icon: 'icon-huangguan'
                }, {
                    title: '专栏',
                    icon: 'icon-diaodeng'
                }]
            }
        },
        components: {
            Grid,
            GridItem
        }
    }
</script>

<style lang='scss' scoped>
    .Gongge {
        width: 100%;
        position: absolute;
        top: 6rem;
        left: 0;
        
        .Gongge-con {
            display: flex;
            align-items: center;
            width: 100%;
            height: 2rem;
            background-color: white;
            border-top-right-radius: 0.8rem;
            border-top-left-radius: 0.8rem;
            border-bottom: 0.3rem solid rgb(236, 231, 231);
            .Gongge-mix{
                font-size: 0.5rem;
                text-align: center;
            }
        }
    }
</style>